import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { User, Settings, LogOut, Heart, MessageCircle, MapPin } from 'lucide-react';
import { useAuthStore } from '../stores';
import { useNavigate } from 'react-router-dom';
import { apiService } from '../services/api';
import type { InterestTag } from '../types/api';

const ProfilePage: React.FC = () => {
  const { user, logout } = useAuthStore();
  const navigate = useNavigate();
  const [userInterests, setUserInterests] = useState<InterestTag[]>([]);

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  // 获取用户兴趣标签
  useEffect(() => {
    const fetchUserInterests = async () => {
      if (!user) return;

      try {
        // 调用后端API获取用户的兴趣标签
        const response = await apiService.getInterestTags();
        if (response.code === 0 && response.data.tags) {
          // 这里需要根据实际API结构调整
          // 假设后端返回了用户已选择的标签
          setUserInterests(response.data.tags);
        }
      } catch (error) {
        console.error('Fetch user interests error:', error);
      }
    };

    fetchUserInterests();
  }, [user]);

  const menuItems = [
    { icon: User, label: '个人资料', onClick: () => {} },
    { icon: Heart, label: '我的喜欢', onClick: () => {} },
    { icon: MessageCircle, label: '聊天记录', onClick: () => {} },
    { icon: MapPin, label: '附近的人', onClick: () => navigate('/nearby') },
    { icon: Settings, label: '设置', onClick: () => {} },
  ];

  return (
    <div className="min-h-screen bg-gray-50 pt-20">
      <div className="max-w-md mx-auto px-4">
        {/* 用户信息卡片 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-6 shadow-sm mb-6"
        >
          <div className="text-center">
            <img
              src={user?.avatar || '/api/placeholder/80/80'}
              alt={user?.nickname}
              className="w-20 h-20 rounded-full mx-auto mb-4 object-cover"
            />
            <h2 className="text-xl font-bold text-gray-900 mb-1">
              {user?.nickname || '用户'}
            </h2>
            <p className="text-gray-600 mb-4">
              ID: {user?.user_id}
            </p>
            {user?.bio && (
              <p className="text-sm text-gray-600 mb-4">
                {user.bio}
              </p>
            )}
            
            {/* 兴趣标签展示 */}
            {userInterests.length > 0 && (
              <div className="mb-4">
                <h3 className="text-sm font-semibold text-gray-700 mb-2">兴趣标签</h3>
                <div className="flex flex-wrap gap-2 justify-center">
                  {userInterests.map((interest) => (
                    <span
                      key={interest.tag_id}
                      className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium"
                    >
                      {interest.tag_name}
                    </span>
                  ))}
                </div>
              </div>
            )}
            
            <button className="btn-outline text-sm">
              编辑资料
            </button>
          </div>
        </motion.div>

        {/* 菜单列表 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="space-y-2"
        >
          {menuItems.map((item, index) => {
            const Icon = item.icon;
            return (
              <motion.button
                key={item.label}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.1 * index }}
                onClick={item.onClick}
                className="w-full bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow duration-200 flex items-center space-x-3"
              >
                <Icon className="text-gray-600" size={20} />
                <span className="text-gray-900 font-medium">{item.label}</span>
                <div className="ml-auto">
                  <div className="w-2 h-2 bg-gray-300 rounded-full"></div>
                </div>
              </motion.button>
            );
          })}
        </motion.div>

        {/* 退出登录 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="mt-8 pb-8"
        >
          <button
            onClick={handleLogout}
            className="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-3 px-4 rounded-xl transition-colors duration-200 flex items-center justify-center space-x-2"
          >
            <LogOut size={20} />
            <span>退出登录</span>
          </button>
        </motion.div>
      </div>
    </div>
  );
};

export default ProfilePage;
